
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>换乘查询</title>
    <meta http-equiv="cleartype" content="on">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale =1,minimal-ui">
    <meta name="apple-mobile-web-app-title" content="公交">
    <meta name="description" content=" 最精准的实时公交app">
    <meta name="keywords" content="实时公交">
    <meta name="renderer" content=webkit>
    <meta name="force-rendering" content="webkit">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content=" 320">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="format-detection" content=" telephone=no; address=no;email =no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="mobile-web-app-capable" content="yes">

    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">

    <link href="../css/mui.min.css" rel="stylesheet" />
    <link href="../fonts/iconfont.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/bns.css" rel="stylesheet" />
    <style>
        #transfer-detail .slide-content {
            height: 470px;
            overflow: auto;
        }
    </style>
</head>

<body style="background-color:#fff;overflow: hidden;">
    <div class="mui-content" id="transfer-detail">
        <div class="line-search-top">
            <a class="gz-action-back mui-icon mui-icon-left-nav mui-pull-left" onclick="historyBack()"></a>
        </div>
        <div class="mui-slider gz-slider">
            <div class="mui-slider-group">
            </div>
            <div class="mui-slider-indicator">

            </div>
        </div>
        <div class="slide-content">
            <div class="line-transfer-plan">
            </div>
        </div>
    </div>
</body>

</html>

<script src="../js/api.js"></script>
<script src="../js/zepto.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/boot.js"></script>
<script src="../js/map.js"></script>
<script src="../js/components.js"></script>

<script type="text/javascript">

    var webApp = {
        dataStore: null,
        sname:null,
        ename:null,
        maskInit: function () {
            //widget.markView.show(1,'');
        },
        eventInit: function () {
            $("#transfer-detail").on('click', '.get-more', function () {
                if ($(this).html() == "详情") {
                    $(this).html("收起");
                    //$(this).parent('.line-end').hide();
                    $(this).parents('.line-site').find('.site-list').show();
                } else {
                    $(this).html("详情");
                    //$(this).parent('.line-end').hide();
                    $(this).parents('.line-site').find('.site-list').hide();
                }

            });
            document.querySelector('.mui-slider').addEventListener('slide', function (event) {
                //console.log(event.detail.slideNumber);
                webApp.methodInit.oncreatLineSite(webApp.dataStore, parseInt(event.detail.slideNumber));
            });
        },
        methodInit: {
            //公交
            onCreatBusDom: function (data) {
                var html = [];
                var len = data.length > 2 ? 2 : data.length
                for (var i = 0; i < len; i++) {
                    html.push(data[i].carno);
                }
                return html.join('/');
            },
            //是否显示线路，根据该线路是否有公交出行方案判断
            onCheckCreatLine: function (data) {
                if (!data) return false;
                for (var i = 0; i < data.length; i++) {
                    if (data[i].bus.length > 0) {
                        return true;
                    }
                }
                return false;
            },
            //格式化数据，将不含有公交出行方案的线路去掉
            formatData: function (data) {

                var res = {
                    plans: []
                };

                if (data && data.plans && data.plans.length > 0) {

                    var plans = data.plans;
                    for (var i = 0; i < plans.length; i++) {
                        var sgmet = plans[i].sgmet;
                        var fgt = [];
                        for (var j = 0; j < sgmet.length; j++) {
                            var line = {};
                            var car = [];
                            var item = sgmet[j];
                            var bus = item.bus;

                            if (bus) {
                                line.via_stops = bus.via_stops;
                                line.on_station = bus.on_station;
                                line.off_station = bus.off_station;
                                var trip = bus.trip;
                                if (trip && trip.length > 0) {
                                    for (var k = 0; k < trip.length; k++) {
                                        if (trip[k]) {
                                            car.push({
                                                carno: trip[k].carno,
                                                desc: trip[k].desc
                                            });
                                        }
                                    }
                                }
                            }
                            line.car = car;
                            line.cost = item.cost;
                            line.time = item.time;
                            line.distance = item.distance;
                            line.onedistance = item.onedistance;
							line.twodistance = item.twodistance;
                            line.theredistance = item.theredistance;
                            line.theredistances = item.theredistances;
                            line.theredistancess = item.theredistancess;
                            fgt.push(line);
                        }
                        res.plans.push({ fgt: fgt });
                    }
                }

                return res;
            },
            onCreateCar: function (data) {
                if (!data) return '';
                var html = '<div style="float:left;">';
                html += '<span class="line-num">';
                html += '<img  src="../img/home/图2.png"/>';
                html += data.carno;
                html += '</span>';
                html += '</div>';
                return html;
            },
            onCreateCarNext: function (data) {
                if (!data) return '';
                var html = '<span class="grag-triangle"></span>';
                html += '<div style="float:left;">';
                html += '<span class="line-num">';
                html += '<img  src="../img/home/图2.png"/>';
                html += data.carno;
                html += '</span>';
                html += '</div>';
                return html;
            },
            //生成顶部滑动dom
            oncreatSlideDom: function (res) {
                if (!res && !data.res)
                    return;

                var data = webApp.methodInit.formatData(res);
                //   console.log(data);
                var html = '',
                    points = '';
                var plans = data.plans;

                for (var i = 0; i < plans.length; i++) {
                    var active = i == 0 ? 'mui-slider-item-duplicate' : '';
                    var pointsActive = i == 0 ? 'mui-active' : '';
                    html += '<div class="mui-slider-item ' + active + '">'
                        + '<div class="line-plan">'
                        + '<div class="gz-app-font-16 line-transfer">';
                    var time = '';
                    var fgt = plans[i].fgt;
                    var triangle = i == 0 ? '' : '<span class="grag-triangle"></span>';
                    for (var j = 0; j < fgt.length; j++) {
                        var item = fgt[j];
                        var car = item.car[0];
                        var car_html = '';
                        time = item.time;

                        if (j == 0) {
                            car_html = this.onCreateCar(car);
                        } else {
                            car_html = this.onCreateCarNext(car);
                        }
                        html += car_html;
                    }

                    html += '</div>';
                    html += '<p style="font-size:16px;font-weight:bold;padding-left: 5px;">' + time + '</p>';
                    html += '</div>';
                    html += '</div>';
                    points += '<div class="mui-indicator ' + i + '"></div>';
                }
                $('#transfer-detail .gz-slider .mui-slider-group').html(html);
                $('#transfer-detail .gz-slider .mui-slider-indicator').html(points);

                webApp.dataStore = data;
                var gallery = mui('#transfer-detail .gz-slider');
                var json = wbComMethod.onUrlParams();
                // console.log(webApp.dataStore);
                // console.log(gallery);
                // console.log(json);
                gallery.slider().gotoItem(parseInt(json.index));
                webApp.methodInit.oncreatLineSite(data, parseInt(json.index));
            },
            //生成站点
            oncreatLineSite: function (data, index) {
                    // console.log(data)
                var html = '';
                if (!data || !data.plans[index] || !data.plans[index].fgt)
                    return;

                var fgt = data.plans[index].fgt;
                if(fgt.length == 1){
                    var item = fgt[0];
                    // console.log(item);
                    if (item) {
                        var desc = '';
                        var car = item.car;
                        var via_stops = item.via_stops;
                        if (car && car.length > 0) {
                            desc += car[0].desc;
                        }
                        html += '<div class="line-site blue-line">'
                            +'<span style="display: inline-block;width: 15px;height: 15px;position: absolute;margin-left: -8px;margin-top: 7px;border-radius: 50px;background: #62cb76;"></span>'
                            + '<p><span style="font-size:14px;color:#000;    font-weight: bold;">'
                            + webApp.sname
                            + '</span></p>'
                            + '</div> ';
                            if(item.onedistance != 0){
                        	html +='<div style="font-size:12px;padding-left: 10px;color: #795548;margin-left: 80px;border-left: 2px dotted #62cb76;"> 步行'+item.onedistance +'米</div>';
                        };
                        html += '<div class="line-site blue-line" style="border-left: 2px solid #62cb76;">';
                        html += '<p class="gz-app-font-black">' + item.on_station;
                        html+='</p>';
                        html += '<div class="s-circle"></div>';
                        html += '<p class="line-end">'
                            + '<span style="color:#62cb76;">乘坐' + item.via_stops.length + '站</span>'
                            + '<span class="get-more">详情</span>'
                            + '</p>';
                        html += '<div class="site-list" style="display: none;">';
                        for (var j = 0; j < item.via_stops.length; j++) {
                            html += '<p>' + item.via_stops[j].name + '</p>';
                        }
                        html += '</div>';
                        html += '<p class="gz-app-font-black">' + item.off_station ;
                        html += '</p>';
                        html += '<div class="e-circle"></div>';
                        html += '</div>';
                        if(item.theredistance != 0){
                        	html += '<div style="font-size:12px;padding-left: 10px;color: #795548;margin-left: 80px;border-left: 2px dotted #62cb76;"> 步行'+item.theredistance +'米</div>';
                        }else{
                        	if(item.twodistance != 0){
                        		html += '<div style="font-size:12px;padding-left: 10px;color: #795548;margin-left: 80px;border-left: 2px dotted #62cb76;"> 步行'+item.twodistance +'米</div>';
                        	}
                        };
                        html += '<div class="line-site blue-line" style="">'
                            +'<span style="display: inline-block;width: 15px;height: 15px;position: absolute;margin-left: -8px;margin-top: 12px;border-radius: 50px;background: #ff4400;"></span>'
                            + '<p style="padding: 10px 10px 5px;"><span style="font-size:14px;color:#000;    font-weight: bold;">'
                            + webApp.ename
                            + '</span></p>'
                            + '</div> ';
                    }
                };
                if(fgt.length == 2){
                    var item = fgt[0];
                    var items = fgt[1];
                    // console.log(item);
                    if (item) {
                        var desc = '';
                        var car = item.car;
                        var via_stops = item.via_stops;
                        if (car && car.length > 0) {
                            desc += car[0].desc;
                        }
                        html += '<div class="line-site blue-line">'
                            +'<span style="display: inline-block;width: 15px;height: 15px;position: absolute;margin-left: -8px;margin-top: 7px;border-radius: 50px;background: #62cb76;"></span>'
                            + '<p><span style="font-size:14px;color:#000;    font-weight: bold;">'
                            + webApp.sname
                            + '</span></p>'
                            + '</div> ';
                            if(item.onedistance != 0){
                        	html +='<div style="font-size:12px;padding-left: 10px;color: #795548;margin-left: 80px;border-left: 2px dotted #62cb76;"> 步行'+item.onedistance +'米</div>';
                        };
                        html += '<div class="line-site blue-line" style="border-left: 2px solid #62cb76;">';
                        html += '<p class="gz-app-font-black">' + item.on_station;
                        html+='</p>';
                        html += '<div class="s-circle"></div>';
                        html += '<p class="line-end">'
                            + '<span style="color:#62cb76;">乘坐' + item.via_stops.length + '站</span>'
                            + '<span class="get-more">详情</span>'
                            + '</p>';
                        html += '<div class="site-list" style="display: none;">';
                        for (var j = 0; j < item.via_stops.length; j++) {
                            html += '<p>' + item.via_stops[j].name + '</p>';
                        }
                        html += '</div>';
                        html += '<p class="gz-app-font-black">' + item.off_station ;
                        html += '</p>';
                        html += '<div class="e-circle"></div>';
                        html += '</div>';


                        var descs = '';
                        var cars = items.car;
                        var via_stopss = items.via_stops;
                        if (cars && cars.length > 0) {
                            descs += cars[0].desc;
                        }
                        if(items.twodistance != 0){
                        	html +='<div  style="font-size:12px;padding-left: 10px;color: #795548;margin-left: 80px;border-left: 2px dotted #62cb76;"> 步行'+items.twodistance +'米</div>';
                        }else{
                            if(items.theredistance != 0){
                                html +='<div  style="font-size:12px;padding-left: 10px;color: #795548;margin-left: 80px;border-left: 2px dotted #62cb76;"> 步行'+items.theredistance +'米</div>';
                            }
                        };
                        html += '<div class="line-site blue-line" style="border-left: 2px solid #62cb76;">';
                        html += '<p class="gz-app-font-black">' + items.on_station;
                        html+='</p>';
                        html += '<div class="s-circle"></div>';
                        html += '<p class="line-end">'
                            + '<span style="color:#62cb76;">乘坐' + items.via_stops.length + '站</span>'
                            + '<span class="get-more">详情</span>'
                            + '</p>';
                        html += '<div class="site-list" style="display: none;">';
                        for (var j = 0; j < items.via_stops.length; j++) {
                            html += '<p>' + items.via_stops[j].name + '</p>';
                        }
                        html += '</div>';

                        html += '<p class="gz-app-font-black">' + items.off_station ;
                           
                        html += '</p>';
                        html += '<div class="e-circle"></div>';
                        html += '</div>';
                        if(items.theredistance != 0 &&  items.theredistance == undefined){
                                html += '<div style="font-size:12px;padding-left: 10px;color: #795548;margin-left: 80px;border-left: 2px dotted #62cb76;"> 步行'+items.theredistance +'米</div>';
                        }else{
                           if(items.theredistances != 0){
                            html += '<div style="font-size:12px;padding-left: 10px;color: #795548;margin-left: 80px;border-left: 2px dotted #62cb76;"> 步行'+items.theredistances +'米</div>';
                           }else{
                               if(items.theredistancess != 0 ){
                                html += '<div style="font-size:12px;padding-left: 10px;color: #795548;margin-left: 80px;border-left: 2px dotted #62cb76;"> 步行'+items.theredistancess +'米</div>';
                               }
                           }
                        }
                        html += '<div class="line-site blue-line" style="">'
                            +'<span style="display: inline-block;width: 15px;height: 15px;position: absolute;margin-left: -8px;margin-top: 12px;border-radius: 50px;background: #ff4400;"></span>'
                            + '<p style="padding: 10px 10px 5px;"><span style="font-size:14px;color:#000;    font-weight: bold;">'
                            + webApp.ename
                            + '</span></p>'
                            + '</div> ';
                    }
                }
                $("#transfer-detail .slide-content .line-transfer-plan").html(html);
            }
        },
        pageInit: function () {
            this.maskInit();
            this.eventInit();
        },
    };

    window.onload = function () {
        webApp.pageInit();
        var json = wbComMethod.onUrlParams();
        mapTool.onImport(function (ctx) {
            ctx.onTransferPlan({
                sname: json.sname,
                ename: json.ename,
                type: json.type,
                callback: function (res) {
                    // console.log(res);
                    webApp.sname = json.sname;
                    webApp.ename = json.ename;
                    console.log(json.sname,json.ename)
                    webApp.methodInit.oncreatSlideDom(res);
                    //              		webApp.methodInit.onCreatLinePlan(res);
                }
            });
        });
    };

</script>
